<template>
	<view class="page">
		<!-- 发表评论 wwl -->
		<view class="list">
			<block  v-if='photo.length > 0'>
				<view class="row" v-for="(row,i) in photo" :key='i'>
					<image :src="row"  class="img" mode="scaleToFill"></image>
					<image src="https://xiaoqu.wuguoxin.vip/uploads/web/close02.png" mode="scaleToFill" @click='onDelete(i)' class="icon"></image>
				</view>
			</block>
			<view class="row2"   v-if=' photo.length < 6' @click="setPhoto()">
				<image src="https://xiaoqu.wuguoxin.vip/uploads/web/photograph.png"  class="img" mode="scaleToFill"></image>
				<text>{{photo.length}}/6</text>
			</view>
		</view>
		<view class="line">
		</view>
		<view class="tab_row" v-if='evaluateList && evaluateList.length > 0'>
			<view class="left">
				猜你想说
			</view>
			<tabRow :list='evaluateList' class='right' @change='changeTab' ref='tabRow' :color='false' />
		</view>
		<view class="evaluate" v-if='evaluateId && evaluateId.length > 0'>
			<text v-for='(row,i) in evaluateId' :key='i' class="text" @click='onDeteleEvaluate(row.name,i)'>{{row.name}}</text>
		</view>
		<textarea v-model="remarks" maxlength="200" placeholder="商品满足您的期待吗？说出您的体验，分享给想买的大家吧~" placeholder-class="remark1"  class="remark"/>
		<view class="select_box" @click="is_anonymous = is_anonymous == 1 ? 2 : 1">
			<n-icon name="roundcheckfill" size="32" color='#adadad' v-if='is_anonymous == 2'></n-icon>
			<n-icon name="roundcheckfill" size="32" color='#fd7a22' v-else></n-icon>
			<text>匿名评价</text>
		</view>
		<view class="button_box">
			<button :loaidng='loading' class="btn" @click="onSave()">提交</button>
		</view>
	</view>
</template>

<script>
	import  { getWantSay,getCommentAdd} from "../static/api.js"
	import tabRow from '@/components/tab-row.vue'
	export default {
		components:{tabRow},
		data(){
			return{
				id:null,
				remarks:'',
				photo:[],
				evaluateList:[],
				evaluateId:[],
				is_anonymous:2,
				loading:false,
				goods_id:null,
				type:null,
			}
		},
		methods:{
			async onSave(){
				if(this.loading ) return 
				if (!this.$regular.funShowToast(null, this.remarks , '请填写商品评价！')) return false
				this.loading = true
				try{
					var res = await getCommentAdd({id:this.id,content:this.remarks,comment_id:'',img_arr:this.photo.join(','),is_anonymity:this.is_anonymous})
					uni.showToast({title:'评论成功',icon:'none'})
					setTimeout(()=> {
						this.loading = false
						uni.redirectTo({url:'/pagesMy/order/evaluationSuccess?goods_id=' + this.goods_id + '&type=' + this.type})
					}, 1000);
				}catch{
					this.loading = false
				}
				// comment_id上级评论id  暂时没这个功能 可不传
			},
			onDelete(i) {
				this.photo.splice(i, 1)
			},
			changeTab(id){
				var row = this.evaluateList.find(c=>c.id == id)
				var  i = this.evaluateId.findIndex(c=>c.id == id) 
				// i == -1 ?  this.evaluateId.push(row) :  this.evaluateId.splice(i,1)
				if(i == -1){
					this.evaluateId.push(row)
					this.remarks = this.remarks + ' ' + row.name
				}
				
			},
			onDeteleEvaluate(name,i){
				uni.showModal({
					title: '提示',
					content: `删除当前标签`,
					success:async (res)=>{
					  if (res.confirm) {
						 this.evaluateId.splice(i,1)
						 if( this.remarks.indexOf(name) != -1){
							this.remarks = this.remarks.replace(name,"");
						 }
						  
					  }
					}
				})
			},
			setPhoto() {
				uni.chooseImage({
					count: 6 - this.photo.length, //默认9
					sizeType: ['original', 'compressed'], 
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({mask: false})
						for(let i = 0 ; i < res.tempFilePaths.length ;i++){
							this.$upload(res.tempFilePaths[i]).then(result =>{
								if(result.code == 200){
									this.photo.push(result.data.img)
									if(i== res.tempFilePaths.length-1 ){
										this.$forceUpdate()
										uni.hideLoading()
									}
								}
							})
							
						}
						
						
					}
				});
			},
			async getInfo(){
				try{
					var res = await getWantSay()
					res.forEach(x=>x.name = x.say)
					this.evaluateList = res
				}catch{}
				// this.evaluateList = [
				// 	{name:'感觉很好用1',id:1},{name:'感觉很好用2',id:2},{name:'感觉很好用3',id:3},{name:'感觉很好用4',id:4},
				// 	{name:'感觉很好用5',id:5},{name:'感觉很好用6',id:6},{name:'感觉很好用7',id:7},{name:'感觉很好用8',id:8}
				// ]
			}
		},
		onLoad(params){
			this.id = params.id
			this.type = params.type
			this.goods_id = params.goods_id
			this.getInfo()
		}
	}
</script>

<style lang="scss" scopeds>
	.page{
		padding-bottom: 160rpx;
	}
	.list{
		display: flex;
		padding: 60rpx 12rpx 52rpx 36rpx ;
		width: 100%;
		box-sizing: border-box;
		.row{
			position: relative;
			margin: 0 24rpx 24rpx 0;
			.img{
				width: 210rpx;
				height: 208rpx;
			}
			.icon{
				position: absolute;
				right: -15rpx;
				top:-15rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		.row2{
			width: 210rpx;
			height: 208rpx;
			background: #ffffff;
			border: 2rpx dashed #bbbbbb;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.img{
				width: 60rpx;
				height: 48rpx;
				margin-bottom: 10rpx;
			}
			color:#BBBBBB;
			font-size: 24rpx;
		}
	}
	.line{
		margin: 0 auto;
		width: 734rpx;
		height: 2rpx;
		background: #dddddd;
	}
	.tab_row{
		display: flex;
		justify-content: space-between;
		padding: 40rpx 36rpx 24rpx;
		width: 100%;
		box-sizing: border-box;
		align-items: center;
		.right{
			width: calc(100% - 5em);
		}
	}
	.evaluate{
		width: 100%;
		padding: 0 36rpx;
		box-sizing: border-box;
		.text{
			display: inline-block;
			font-size: 24rpx;
			padding: 6rpx 28rpx;
			line-height: 34rpx;
			border-radius: 8rpx;
			background: #666666;
			margin: 0 16rpx 12rpx 0;
			color:#fff
		}
	}
	.remark{
		margin: 66rpx auto  0;
		width: 678rpx;
		height: 192rpx;
		background: #ffffff;
		border: 2rpx solid #f6f7fb;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		line-height: 34rpx;
		color:#26252B
	}
	.remark1{
		color:#ADADAD;
		font-size: 24rpx;
		line-height: 34rpx;
	}
	.select_box{
		padding-top: 118rpx;
		display: flex;
		align-items: center;
		text{
			color:#ADADAD;
			line-height: 34rpx;
			font-size: 24rpx;
			display: inline-block;
			margin-left: 20rpx;
		}
	}
	.button_box{
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		width: 750rpx;
		padding: 20rpx 36rpx 30rpx;
		box-sizing: border-box;
		.btn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: $theme;
			border-radius: 40rpx;
			color:#fff;
			font-size: 28rpx;
		}
	}
	button[loading]::before{
		align-self:center
	}
	button{
		display: flex;
		justify-content: center;
		align-item:center;
		padding: 0;
	}
	button::after{
		border: none;
	}

</style>
